<!--
 描述: 滚动弧形线
 作者: Jack Chen
 日期: 2020-04-20
-->

<template>
  <div class="hbh-container">
    <commonTitle :title="'近30日备月供水统计'" />
    <div
      class="chartsdom"
      style="width: 100%;height: 300px;"
      id="chart_arc"
    ></div>
  </div>
</template>

<script>
export default {
  name: "offerWater",
  data() {
    return {
      option: null,
      number: 0, // 播放所在下标
      timer: null,
      xData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      data: [
        [24, 76, 36, 67, 86, 79, 78, 13, 28, 2, 56, 88],
        [54, 86, 46, 77, 96, 89, 88, 23, 38, 3, 66, 98],
        [64, 96, 56, 87, 106, 99, 98, 33, 48, 4, 108, 28],
      ],
    };
  },
  mounted() {
    this.getEchart();
  },
  methods: {
    getEchart() {
      let myChart = echarts.init(document.getElementById("chart_arc"));
      this.option = {
        tooltip: {
          trigger: "axis",
          showContent: true,
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 1,
                  color: "#5d83ff",
                },
                {
                  offset: 0,
                  color: "rgba(255, 255, 255, 0)",
                },
              ]),
            },
          },
          formatter: (parms) => {
            return `<div> <span>${parms[0].axisValue}月<span><br/><span>供水${parms[0].data}m³<br/><span></div>`;
          },
        },
        legend: {
          show: true,
          right: "5%",
          icon: "rect",
          data: [
            {
              name: "供水量",
              itemStyle: {
                color: "#63E19E",
              },
            },
          ],
          textStyle: {
            color: "#d9dadb",
          },
        },
        grid: {
          top: 30,
          left: 20,
          right: 20,
          bottom: 20,
          containLabel: true, //轴上的数值
        },
        xAxis: {
          type: "category",
          data: this.xData,
          // boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLabel: {
            formatter: "{value} 月",
          },
          axisLine: {
            lineStyle: {
              color: "#ffffff",
            },
          },
        },
        yAxis: {
          type: "value",
          name:"单位：m³",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#ffffff",
            },
          },
        },
        series: [
          {
            name: "供水量",
            type: "line",
            data: this.data[1],
            symbolSize: 10,
            symbol: "none",
            lineStyle: {
              color: "#63E19E",
            },
            emphasis: {
              label: {
                show: true,
                color: "#fff",
                fontSize: 20,
              },
              itemStyle: {
                color: "#63D89A",
                borderColor: "#fff",
                borderWidth: 2,
                opacity: 1,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#63E19E",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 0, 0, 0)",
                  },
                ]),
              },
            },
            smooth: true,
          },
        ],
      };
      myChart.setOption(this.option, true);

      window.addEventListener("resize", () => {
        myChart.resize();
      });

      // this.timer = setInterval(() => {
      //   myChart.dispatchAction({
      //     type: 'showTip',
      //     seriesIndex: 0,
      //     dataIndex: this.number
      //   });

      //   this.number++;

      //   if (this.number > this.data.length) {
      //     this.number = 0;
      //   }
      // }, 1000);
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
.hbh-container {
  width: 100%;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .banner {
    padding-top: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .showCurrentMonth {
    position: absolute;
    top:calc(50% - 30px);
    left: 120px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    .itemChild {
      width: 60px;
      height: 60px;
      background-color: #1D1F21;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .itemChild:nth-of-type(1) {
      background-color: #22a0f3;
      font-size: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
</style>
